<template>
  <div class="message-list-block" @scroll="listTop" v-loading="messageLoading">
    <div class="no-message" v-if="isCompleted">没有更多啦</div>
    <div class="t-message" :class="item.flow === 'out'?'mine':''" v-for="item in messageList" :key="item.ID">
      <img :src="item.avatar || 'https://sdk-web-1252463788.cos.ap-hongkong.myqcloud.com/component/TUIKit/assets/avatar_21.png'" v-if="item.flow==='in'&&item.payload.data!='position'" class="message-avatar" />
      <div :class="item.flow === 'out'?'mine':''" :style="item.payload.data==='position'?'width:100%;display:flex;justify-content:center':''" class="message-render-block">
        <MessageText v-if="item.type === 'TIMTextElem'" :message="item" :isMine="item.flow === 'out'"></MessageText>
        <MessageImage v-if="item.type === 'TIMImageElem'" :message="item" :isMine="item.flow === 'out'"></MessageImage>
        <MessageVideo v-if="item.type === 'TIMVideoFileElem'" :message="item" :isMine="item.flow === 'out'"></MessageVideo>
        <MessageAudio v-if="item.type === 'TIMSoundElem'" :message="item" :isMine="item.flow === 'out'"></MessageAudio>
        <MessageCustom v-if="item.type === 'TIMCustomElem'" :message="item" :isMine="item.flow === 'out'"></MessageCustom>
      </div>
      <img :class="item.flow === 'out'?'mine':''" :src="item.avatar || 'https://sdk-web-1252463788.cos.ap-hongkong.myqcloud.com/component/TUIKit/assets/avatar_21.png'" v-if="item.flow==='out'&&item.payload.data!='position'" class="message-avatar" />
    </div>
  </div>
</template>

<script>
import MessageText from "@/pages/im/components/Message/Render/MessageText";
import MessageImage from "@/pages/im/components/Message/Render/MessageImage";
import MessageVideo from "@/pages/im/components/Message/Render/MessageVideo";
import MessageAudio from "@/pages/im/components/Message/Render/MessageAudio";
import MessageCustom from "@/pages/im/components/Message/Render/MessageCustom";
export default {
  name: "MessageList",
  components: {MessageCustom, MessageAudio, MessageVideo, MessageText,MessageImage},
  props:['conversation'],
  data(){
    return{
      isCompleted:false,
      nextReqMessageID: '',
      messageList:[],
      scrollTop:0,
      messageLoading:false,
    }
  },
  watch:{
    conversation: {
      handler: function(newVal) {
        if (!newVal.conversationID) return;
        this.conversation=newVal;
        this.isCompleted=false;
        this.nextReqMessageID= '';
        this.messageList=[];
        this.$nextTick(()=>{
          this.getMessageList(newVal);
        })
      },
      deep: true,
      immediate:true
    }
  },
  mounted() {
    // SDK 收到推送的单聊、群聊、群提示、群系统通知的新消息，event.data
    this.$bus.$on('onMessageReceived',(e)=>{
      this.$onMessageReceived(e);
    })
  },
  beforeDestroy() {
    this.$bus.$off('onMessageReceived');
  },
  methods:{
    listTop(a){
      if(a.target.scrollTop===0){
        this.getMessageList(this.conversation);
      }
    },
    // 处理接收消息
    $onMessageReceived(value) {
      // 若需修改消息，需将内存的消息复制一份，不能直接更改消息，防止修复内存消息，导致其他消息监听处发生消息错误
      const event = value;
      const list = [];
      event.data.forEach(item => {
        if (item.conversationID === this.conversation.conversationID) {
          list.push(Object.assign(item));
        }
      });
      this.messageList = this.messageList.concat(list);
      this.scrollToBottom();
    },
    // 自己的消息上屏
    updateMessageList(msg) {
      this.messageList = [...this.messageList, msg];
      this.scrollToBottom();
    },
    scrollToBottom() {
      this.$nextTick(()=>{
        setTimeout(()=>{
          const query=document.getElementsByClassName('message-list-block')[0];
          query.scrollTop=query.scrollHeight;
        },100)
      })
    },
    getMessageList(conversation) {
      if (!this.isCompleted) {
        this.messageLoading=true
        this.tim.getMessageList({
          conversationID: conversation.conversationID,
          nextReqMessageID: this.nextReqMessageID,
          count: 15
        }).then(res => {
          const isBottom=!this.nextReqMessageID
          this.messageLoading=false;
          const { messageList } = res.data; // 消息列表。
          this.nextReqMessageID = res.data.nextReqMessageID; // 用于续拉，分页续拉时需传入该字段。
          this.isCompleted = res.data.isCompleted; // 表示是否已经拉完所有消息。
          this.messageList = [...messageList, ...this.messageList];
          this.$handleMessageRender(this.messageList,isBottom );
        }).catch(()=>{
          this.$message.error('消息加载失败');
          this.messageLoading=false;
        })
      }
    },
    // 历史消息渲染
    $handleMessageRender(messageList,isBottom=true) {
      if (messageList.length > 0) {
        this.messageList=messageList;
        isBottom&&this.scrollToBottom();
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.message-list-block{
  width: 100%;
  height: 100%;
  overflow-y: auto;
  padding: 0 20px;
  .no-message {
    text-align: center;
    width: 100%;
    font-size: 14px;
    color: #a5b5c1;
    margin: 10px 0;
  }
  .t-message{
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
    .message-avatar{
      width: 45px;
      height: 45px;
      border-radius: 8px;
      margin-right: 10px;
      margin-left: 0;
    }
    .message-avatar.mine{
      margin-left: 10px;
      margin-right: 0;
    }
    .message-render-block{
      width: calc(100% - 100px);
      display: flex;
      flex-direction: row;
    }
    .message-render-block.mine{
      justify-content: flex-end;
    }
  }
  .t-message.mine{
    justify-content: flex-end;
  }
}
</style>
